<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="300" height="300"></canvas>

    <script>
      let canvas = document.querySelector("#canvas");
      let context = canvas.getContext("2d");

      //   context.fillRect(0, 0, 10, 10);
      //   context.fillRect(20, 0, 10, 10);

      let size = 10
      let xsize = canvas.width / size;
      let ysize = canvas.height / size;

      //   测试 一行画法
      //   for (let i = 0; i < xsize; i++) {
      //     // console.log(i);
      //     if (!(i % 2)) {
      //       context.fillRect(i * 10, 0, 10, 10);
      //     }
      //   }

      // 遍历列
      for (let y = 0; y < ysize; y++) {
        if (y % 2) {
          for (let x = 0; x < xsize; x++) {
            if (x % 2) {
              context.fillRect(x * size, y * size, size, size);
            }
          }
        } else {
          for (let x = 0; x < xsize; x++) {
            if (!(x % 2)) {
              context.fillRect(x * size, y * size, size, size);
            }
          }
        }
      }
    </script>
  </body>
</html>
